<template>
    <div>
        <a-row>
            <a-row class='mytitle'>
                {{ $t('告警规则') }}
            </a-row>

            <NoAuthPage v-showNoAuth="'F3-1'" />

            <a-row style="margin:1em" v-userAuth="'F3-1'">
                <a-card hoverable>
                    <div style="margin:0 0 1em 0;">
                        <div style="display: flex;">
                            <div>
                                <span style="margin-right: 8px;">{{ $t('告警等级') }}：</span>
                                <a-select v-model="warningLevel" style="width: 196px" @change="handleSelect">
                                    <a-select-option value="">{{ $t('全部等级') }}</a-select-option>
                                    <a-select-option value="提示">{{ $t('提示') }}</a-select-option>
                                    <a-select-option value="警告">{{ $t('警告') }}</a-select-option>
                                    <a-select-option value="严重">{{ $t('严重') }}</a-select-option>
                                    <!-- <a-select-option v-for="item in levelList" :value='item.value'
                                        :key="item.value">{{ item.label }}</a-select-option> -->
                                </a-select>
                            </div>
                            <!-- <a-button v-userAuth="'F3-2'" style="margin-left: 16px;" type='primary' @click="changeNum">
                                {{ $t('告警数量上限') }}
                            </a-button> -->
                        </div>
                        <a-table style="margin-top:16px" class="bigstyle" rowKey="id" :columns='columns' :loading="loading"
                            :dataSource='warningList' :locale="defaultSetting" :pagination='pagination' size='small'>
                            <template slot="rule_status" slot-scope="rule_status">
                                <div v-if="rule_status == '0'">
                                    <span class="dot success"></span>
                                    <span style="margin-left: 4px;">{{ $t('默认规则') }}</span>
                                </div>
                                <div v-else-if="rule_status == '1'">
                                    <span class="dot"></span>
                                    <span style="margin-left: 4px;">{{ $t('自定义规则') }}</span>
                                </div>
                            </template>
                            <template slot="operate" slot-scope='text, record'>
                                <div v-userAuth="'F3-2'">
                                    <span
                                        v-if="(record.report_values < 0 || record.warn_values < 0, record.critical_values < 0)">-</span>
                                    <a-tooltip v-else placement='top'>
                                        <template slot='title'>
                                            <span>{{ $t('Edit') }}</span>
                                        </template>
                                        <Iconfont class="icon table-operation-icon" type="icon-edit16f"
                                            @click="handleEdit(record)"></Iconfont>
                                    </a-tooltip>
                                </div>
                            </template>
                        </a-table>
                    </div>
                </a-card>
            </a-row>
        </a-row>
        <editRule ref="editRef" @get-list="getList" @handle-reset="handleReset" />
        <!-- <editNum ref="numRef" @get-num="getAlarmCount" /> -->
    </div>
</template>
<script>
import EmptyData from '@/components/common/EmptyData'
import NoAuthPage from '@/components/common/NoAuthPage'
import editRule from './alarmRule/editRule.vue'
import editNum from './alarmRule/editNum.vue'

export default {
    name: 'alarmRule',
    components: { EmptyData, NoAuthPage, editRule, editNum },
    data() {
        return {
            warningList: [],
            confirmInputValue: '',
            loading: false,
            defaultSetting: { emptyText: <EmptyData /> },
            pagination: {
                defaultPageSize: 10,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger: true,
                pageSizeOptions: ['5', '15', '20', '25'],
                onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            levelList: [
                { label: '全部等级', value: '' },
                { label: '提示', value: '提示' },
                { label: '警告', value: '警告' },
                { label: '严重', value: '严重' },
            ],
            warningLevel: '',
            columns: [
                // { title: '状态', dataIndex: 'status', key: 'status', scopedSlots:{customRender:'status'}, },
                { title: this.$t('告警内容'), dataIndex: 'zh_CN', key: 'zh_CN' },
                { title: this.$t('告警对象'), dataIndex: 'object_name', key: 'object_name', scopedSlots: { customRender: 'object' } },
                { title: this.$t('告警等级'), dataIndex: 'leval', key: 'leval' },
                { title: this.$t('告警规则类型'), dataIndex: 'rule_status', key: 'rule_status', scopedSlots: { customRender: 'rule_status' } },
                { title: this.$t('Operate'), key: "operate", scopedSlots: { customRender: 'operate' }, width: 120 }
            ],
        }
    },
    mounted() {
        this.getList()
        this.getAlarmCount()
    },
    methods: {
        async handleSelect(value) {
            await this.getList()
            this.warningList = this.warningList.filter(item => item.leval.includes(value))
        },
        async getAlarmCount() {
            const { data } = await this.$api.alarm.getAlarmCount();
            if (data.mes.count == '-1') {
                this.$refs.numRef.formData.count = ''
                this.$refs.numRef.checked = true
                this.$refs.numRef.isDisabled = true
            } else {
                this.$refs.numRef.formData.count = data.mes.count
            }
        },
        handleEdit(item) {
            this.$refs.editRef.visible = true
            const params = this.$refs.editRef.formData
            this.$refs.editRef.formData = { ...item }
            // params.report_enable = !!(this.$refs.editRef.formData.report_enable)
            // params.warn_enable = !!(this.$refs.editRef.formData.warn_enable)
            if (!params.is_edit) {
                this.$refs.editRef.formData.critical_enable = true
            } else {
                params.critical_enable = !!(this.$refs.editRef.formData.critical_enable)
            }
            this.$refs.editRef.checked = !!(this.$refs.editRef.formData.status)
        },
        async getList() {
            const { data } = await this.$api.alarm.getAlertRule();
            this.warningList = data.mes
        },
        async handleReset(id) {
            await this.$api.alarm.getAlertRule();
            const item = this.warningList.find(item => item.id == id)
            this.$refs.editRef.formData.critical_values = item.default.critical_values
            this.$refs.editRef.formData.report_values = item.default.report_values
            this.$refs.editRef.formData.warn_values = item.default.warn_values
        },
        // changeNum() {
        //     this.$refs.numRef.isShow = true
        // }
    }
}
</script>


<style>
.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: #999999;
}

.success {
    background-color: #129a9a;
}
</style>
